<template>
  <view class="container" @click="goDetail">
    <view class="container_header">
      <view class="container_header_title">
        <view class="container_header_title_left">
          <view class="container_header_title_left_name">
            <image src="/static/image/order_bag.png" mode="widthFix" />
            <view class="container_header_title_left_name_value">{{ item.warehouseName }}</view>
          </view>
          <view class="container_header_title_left_time"> {{ item.createTime }} </view>
        </view>
        <view class="container_header_title_right" @click.stop="goNavi">
          <image src="/static/image/loca_fly_icon.png" mode="widthFix" />
          <!-- <uni-icons type="paperplane" size="26"></uni-icons> -->
        </view>
      </view>
      <view :style="{ color: $statusUtil.getStatusColor(item.orderStatus, 'order') }">{{ $statusUtil.getStatus(item.orderStatus, item.payStatus,item.isAccept) }}</view>
    </view>
    <view class="container_content">
      <view class="container_content_left">
        <image :src="img" mode="aspectFill" v-for="(img, _index) in photoList" :key="_index" />
        <uni-icons v-if="item.detailPhotoList.length > 3" class="container_content_left_more" type="more-filled" color="" size="20" />
      </view>
      <view class="container_content_right">
        <view class="container_content_right_price">
          <view class="container_content_right_price_label">￥</view>
          <view class="container_content_right_price_value">{{ item.taxAmount }}</view>
        </view>
        <view class="container_content_right_num">共{{ item.count }}件</view>
      </view>
    </view>
    <!-- v-if="$statusUtil.isOrderClose(item.orderStatus)" -->
    <view class="container_footer" v-if="$statusUtil.isOrderClose(item.payStatus,item.orderStatus)">
      <button class="short-btn" @click.stop="goShopping">再来一单</button>
    </view>
    <!-- v-if="$statusUtil.idOrderRefund(item.payStatus, item.orderStatus)" -->
    <view class="container_footer" v-if="$statusUtil.idOrderRefund(item.payStatus, item.orderStatus)">
      <button class="short-btn refund" @click.stop="goRefund">我要退款</button>
    </view>
    <!-- <view class="container_footer" v-if="$statusUtil.isOrderPay(item.payStatus)">
      <button class="short-btn" @click.stop="goPay">支付</button>
    </view> -->
  </view>
</template>

<script>
export default {
  name: 'goodsCard',

  props: {
    item: {
      type: Object,
      default: {},
    },

    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      photoList: [],
    }
  },
  created() {
    if (this.item.detailPhotoList && this.item.detailPhotoList.length > 3) {
      this.photoList = this.item.detailPhotoList.slice(0, 3)
    } else {
      this.photoList = this.item.detailPhotoList
    }
  },
  methods: {
    goDetail() {
      this.$emit('goDetail', this.index)
    },
    goRefund() {
      this.$emit('refundOrder', this.index)
    },
    goShopping() {
      this.$emit('goShopping', this.index)
    },
    goNavi() {
      this.$emit('goNavi', this.index)
    },
    goPay(){
      this.$emit('goPay', this.index)
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  border-radius: 10rpx;
  background: white;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
  &_header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &_title {
      display: flex;
      align-items: center;
      &_left {
        &_name {
          display: flex;
          align-items: center;
          image {
            width: 30rpx;
          }
          &_value {
            font-size: 30rpx;
            margin-left: 10rpx;
          }
        }
        &_time {
          font-size: 24rpx;
          color: #666;
        }
      }
      &_right {
        /* margin-left: 10rpx;
        border-radius: 50%;
        padding: 8rpx;
        background-color: white;
        display: flex;
        align-self: center;
        align-items: center;
        justify-content: center;
        border: 1rpx solid #d9d9d9; */
        width: 70rpx;
        height: 70rpx;
        margin-left: 10rpx;
      }
    }
  }
  &_content {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    &_left {
      flex: 1;
      display: flex;
      align-items: last baseline;
      height: 80rpx;
      image {
        width: 80rpx;
        height: 100%;
        margin-left: 10rpx;
        border-radius: 10rpx;
      }
      &_more {
        line-height: 80rpx;
        line-height: 80rpx;
        margin-left: 10rpx;
      }
    }
    &_right {
      text-align: right;
      &_price {
        display: flex;
        align-items: first baseline;
        color: #ff3348;

        &_value {
          font-weight: bold;
          font-size: 48rpx;
        }
      }
      &_num {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  &_footer {
    border-top: 1rpx dashed #d9d9d9;
    margin-top: 20rpx;
    padding-top: 20rpx;
    button {
      margin-right: 0;
    }
  }
}
.selected {
  border: 1px solid rgba(49, 194, 94, 1);
  background: linear-gradient(180deg, rgba(228, 250, 234, 1), rgba(245, 252, 247, 1) 100%);
}
.refund {
  background: #b0b6c2 !important;
}
</style>
